<template>
  <div>
    <el-form size="small" :inline="true" :model="whereData" class="search-from">
      <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.bill_no" placeholder="结算单号"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input @keyup.enter.native="fetchData()" clearable v-model="whereData.company_title" placeholder="所属企业"></el-input>
      </el-form-item>
      <el-form-item>
        <el-date-picker
          style="width: 260px"
          v-model="daterange"
          type="daterange"
          range-separator="至"
          start-placeholder="打款日期(开始)"
          end-placeholder="打款日期(结束)"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchData()">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="section">
      <el-table
        :data="tableData"
        @sort-change="sortList"
        v-loading="isLoading"
        style="width: 100%">
        <el-table-column
          align="center"
          prop="id"
          sortable="custom"
          label="编号">
        </el-table-column>
        <el-table-column
          align="center"
          sortable="custom"
          show-overflow-tooltip
          prop="time_add"
          :formatter="formatTime"
          label="上传时间">
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="company_title"
          label="企业名称">
        </el-table-column>
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="personal_name"
          label="创客姓名">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          prop="wage"
          label="总金额">
        </el-table-column>
        <el-table-column
          align="center"
          sortable="custom"
          show-overflow-tooltip
          prop="tax_should"
          label="应缴税所得额">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="addvalue_tax"
          label="增值税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="city_tax"
          label="城市税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="edu_tax"
          label="教育税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="local_edu_tax"
          label="地方教育税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="in_income_tax"
          label="个人所得税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="water_tax"
          label="水利税">
        </el-table-column>
        <el-table-column
          sortable="custom"
          align="center"
          show-overflow-tooltip
          prop="stamp_tax"
          label="印花税">
        </el-table-column>
        <el-table-column
          align="center"
          sortable="custom"
          label="是否免征税">
          <template slot-scope="scope">
            <div>{{scope.row.is_taxexe === 1 ? '是' : '否'}}</div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作">
          <template slot-scope="scope">
            <router-link :to="'/personal/invoice/detail?id=' + scope.row.id">查看</router-link>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page.sync="pageIndex"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="totalCount">
      </el-pagination>
    </div>
    <el-dialog :visible.sync="dialogImageVisible">
      <img width="100%" :src="dialogImageUrl | checkurl" alt="">
    </el-dialog>
  </div>
</template>
<script>
import tableMixin from '@/common/mixins/tableData'
export default {
  name: 'wait-component',
  mixins: [tableMixin],
  data() {
    return {
      dialogImageVisible: false,
      dialogImageUrl: '',
      listApi: '/personal/bill/get',
      whereData: {
        bill_no: '',
        company_title: '',
        is_tax_prove: 1
      },
      daterange: ''
    }
  },
  methods: {
    showImage(url) {
      this.dialogImageVisible = true
      this.dialogImageUrl = url
    }
  }
}
</script>